<!--
 * @Description: 单曲组件
 * @Author: 56208
 * @Date: 2025/4/19 15:37
 * @LastEditors: 56208
 * @LastEditTime: 2025/4/19 15:37
 * @FilePath: D:/vue3-electron-music/src/renderer/src/components/songList\index.vue
 -->
<template>
  <el-row
    v-for="(item, index) in prop.songList"
    :key="index"
    class="h-44 bg-white rounded-12 px-12 d-al song-container c-pointer mb-8"
    @mouseenter="mouseenter(item)"
    @mouseleave="clearActive"
    @click="playSong(item)"
  >
    <el-col :span="4" class="min-w-24 h-24">
      <img v-if="active === item.id" :src="play2" alt="" class="mt-2 index-content" />
      <el-text v-else>{{ index + 1 }}</el-text>
    </el-col>
    <el-col :span="8">
      <div class="text-ellipsis text-main font-w-400">{{ item.name }}</div>
    </el-col>
    <el-col :span="4" >
      <div class="text-center text-ellipsis text-main font-w-400">{{ item.artistName }}</div>
    </el-col>
    <el-col :span="4" class="text-center">
      <el-text class="text-main font-w-400">{{ item.songTime }}</el-text>
    </el-col>
    <el-col :span="4" class="d-flex justify-end">
      <img :src="operate" alt="" class="text-right" />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import play2 from '@renderer/assets/icon/play2.svg'
import operate from '@renderer/assets/icon/operate.svg'
import { ref, defineProps, getCurrentInstance } from 'vue'
import { useSongStore } from '@renderer/store/song'
const songStore = useSongStore()
const { proxy } = getCurrentInstance() as any
const active = ref('')
const mouseenter = (item: any) => {
  active.value = item.id
}
const clearActive = () => {
  active.value = ''
}
const prop = defineProps({
  songList: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const playSong = (song) => {
  songStore.setCurrentSong(proxy, song)
}
</script>

<style scoped lang="less">
.song-container {
  &:hover {
    background: #90b6ff;
    backdrop-filter: blur(20px);
  }
  // 处理显示和隐藏引起的抖动问题
  .index-content {
    display: inline-block;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 24px;
  }
}
</style>
